<template>
  <div>
    <div class="use-router-header">
      <h3>vue-router应用总结</h3>
    </div>
    <div class="use-router-content">
      <div>
        1.路由跳转:路由跳转可以使用两种方式进行跳转
        <br />
        (1)编程式路由(我一般使用编程式)
        <br />
        (2)声明式路由
      </div>
      <div>
        路由传参
        <br />
        (1)query的方式-------点击按钮将输入框的值传给A页面(一般使用这个)
        <input v-model="aaa" />

        <button @click="useQuery()">query传参</button>
         <br />
        (2)params的方式------这种方式刷新会导致传递的值丢失,这种方式不推荐使用容易出BUG
         <br />
        (3)声明式传参--------点击按钮将输入框的值传给B页面
        <input v-model="bbb" />
        <button @click="userContent()">param传参</button>
         <br />
        <span>(4)query的方式和声明式传参,这两种传参的方式都是比较常见的,</span>
        <br />
        <span>两者存在的不同点是:</span>
        <br />
        (一)  在浏览器的地址栏中,显示的路径格式是不一样的(1)方式显示的是http://localhost:8080/a?id=12----有个问号;
        (3)方式显示的是 http://localhost:8080/b/12-----直接跟传递的值
        <br />
        (二)  获取值得方式不一样(1)方式获取值----this.$route.query.id;(3)方式获取值----this.$route.params.id;
      </div>

      <div>
        嵌套路由
        嵌套路由需要在注册的时候就要在该父路由中的children中去配置,案例使用的配置----
        <br />
        {
        <br />
        path:'/use-router',
        <br />
        name: 'UseRouter',
        <br />
        component: UseRouter,
        <br />
        children: [{
        <br />
        path:'/use-router/c',
        <br />
        name:'C',
        <br />
        component: C
        <br />
        }]
        <br />
        }
        <br />
        <button @click="go()">嵌套路由</button>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UseRouter',
  data() {
    return {
      aaa: '',
      bbb: ''
    }
  },
  mounted() {},
  methods: {
    useQuery() {
      this.$router.push({
        path: '/a',
        query: {
          id: this.aaa
        }
      })
    },
    userContent() {
      this.$router.push({
        path: `/b/${this.bbb}`
      })
    },
    go() {
      this.$router.push({ path: '/use-router/c' })
    }
  }
}
</script>

<style scoped>
.use-router-header {
  text-align: center;
}
.use-router-content {
  display: flex;
  flex-wrap: wrap;
  width: 20%;
  margin-left: 42%;
  margin-top: 10px;
}
button {
  display: inline;
}
</style>
